<template>
	<view class="certification">
		<dwu-navbar title="资质认证"></dwu-navbar>
		<view class="certification-title">
			选择团队属性
		</view>
		<view class="time-type">
			<view class="time-item" @click="chooseTeam(1)">
				<image class="type-bg" src="@/static/certification/type_bg1.png" mode=""></image>
				<text>个人认证</text>
				<view class="checked">
					<image v-if="teamType == 1" src="@/static/certification/checked.png" mode=""></image>
				</view>
			</view>
			<view class="time-item" @click="chooseTeam(2)">
				<image class="type-bg" src="@/static/certification/type_bg2.png" mode=""></image>
				<text>企业认证</text>
				<view class="checked">
					<image v-if="teamType == 2" src="@/static/certification/checked.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 个人 -->
		<personage ref="personage" :info="info" v-show="teamType == 1"></personage>
		<!-- 企业 -->
		<enterprise ref="enterprise" :info="info" v-show="teamType == 2"></enterprise>
		<view class="bottom" v-if="!disabled">
			<view class="agreement">
				<view class="agreement-radio" @click="radioChange">
					<image v-if="!checked" src="@/static/login/select.png" mode=""></image>
					<image v-else src="@/static/login/selected.png" mode=""></image>
					<text>我已阅读并同意<text style="margin-right: 0;" @click="onJump('/subpackage/agreement/agreement?type=privacy')">隐私政策</text>。</text>
				</view>
				<view class="tips" v-if="tipsShow">
					<image src="@/static/login/tips_bg.png" mode=""></image>
					<text>请先阅读并勾选隐私政策</text>
				</view>
			</view>
			<view class="submit" @click="onSubmit">
				提交认证
			</view>
		</view>
		<view class="bottom" v-if="edit">
			<view class="submit edit" @click="showEdit">
				点击修改并重新提交
			</view>
		</view>
	</view>
</template>

<script>
	import personage from './components/personage'
	import enterprise from './components/enterprise'
	export default {
		components: {
			personage,
			enterprise
		},
		data() {
			return {
				checked: false,
				tipsShow: false,
				teamType: 1,
				info: {},
				disabled: false,
				edit: false
			};
		},
		onLoad() {
			this.masterWorkerCheckDetail()
		},
		methods: {
			masterWorkerCheckDetail() {
				this.request.http('/user/masterWorkerCheckDetail', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						if (data.data.id) {
							this.teamType = data.data.is_type == 0 ? 1 : 2
							this.info = data.data
							this.checked = true
							this.disabled = true
							if (data.data.is_status == 2) {
								this.edit = true
							}
							console.log(this.$refs,'add');
							// this.$refs.enterprise.info = data.data
							this.$forceUpdate()
						}
					}
				})
			},
			chooseTeam(teamType) {
				if (this.disabled) return
				this.teamType = teamType
			},
			radioChange(e) {
				this.checked = !this.checked
				this.tipsShow = false
			},
			showEdit() {
				this.disabled = false
				this.edit = false
				if (this.teamType == 1) {
					this.$refs.personage.disabled = false
				}
				if (this.teamType == 2) {
					this.$refs.enterprise.disabled = false
				}
			},
			onSubmit() {
				if (!this.checked) {
					this.tipsShow = true
					return
				}
				if (this.teamType == 1) {
					let form = this.$refs.personage.form
					if (!form.front) {
						uni.showToast({
							icon: 'none',
							title: '请上传身份证人像面'
						})
						return
					}
					if (!form.back) {
						uni.showToast({
							icon: 'none',
							title: '请上传身份证国徽面'
						})
						return
					}
					if (!form.name) {
						uni.showToast({
							icon: 'none',
							title: '请输入真实姓名'
						})
						return
					}
					if (!form.phone) {
						uni.showToast({
							icon: 'none',
							title: '请输入联系人电话'
						})
						return
					}
					if (!/^1[3-9]\d{9}$/.test(form.phone)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确联系人电话'
						})
						return
					}
					if (!form.certificate_type) {
						uni.showToast({
							icon: 'none',
							title: '请选择证件类型'
						})
						return
					}
					if (!form.cart) {
						uni.showToast({
							icon: 'none',
							title: '请输入证件号码'
						})
						return
					}
					if (!/(^\d{17}(\d|X)$)|(^\d{18}$)/.test(form.cart)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确证件号码'
						})
						return
					}
					if (form.email) {
						if (!/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(form.email)) {
							uni.showToast({
								icon: 'none',
								title: '请输入正确电子邮件'
							})
							return
						}
					}
					if (!form.area_id) {
						uni.showToast({
							icon: 'none',
							title: '请选择服务区域'
						})
						return
					}
					if (!form.workyear) {
						uni.showToast({
							icon: 'none',
							title: '请选择工作年限'
						})
						return
					}
					let certificateList = this.$refs.personage.certificateList
					let certificateIds = []
					for (var i = 0; i < certificateList.length; i++) {
						certificateIds.push(certificateList[i].id)
					}
					this.request.http('/user/masterWorkerCheckPersonage', 'post', {
						cartis_img: form.front,
						cartthe_img: form.back,
						name: form.name,
						certificate_type: form.certificate_type,
						cart: form.cart,
						email: form.email || '',
						address: form.address || '',
						remark_message: form.remark_message || '',
						area_id: form.area_id || '',
						workyear: form.workyear,
						workintro: form.workintro || '',
						certificate_id: certificateIds.join(','),
						phone: form.phone,
					}).then(res => {
						let data = res.data
						if (data.code == 1) {
							this.masterWorkerCheckDetail()
							this.$refs.personage.disabled = true
						}
					})
				}
				if (this.teamType == 2) {
					let form = this.$refs.enterprise.form
					console.log(form);
					if (!form.businesslicenseimgs) {
						uni.showToast({
							icon: 'none',
							title: '请上传企业营业执照'
						})
						return
					}
					if (!form.name) {
						uni.showToast({
							icon: 'none',
							title: '请输入企业名称'
						})
						return
					}
					if (!form.certificate_type) {
						uni.showToast({
							icon: 'none',
							title: '请选择证件类型'
						})
						return
					}
					if (!form.cart) {
						uni.showToast({
							icon: 'none',
							title: '请输入证件代码'
						})
						return
					}
					if (!form.corporation_name) {
						uni.showToast({
							icon: 'none',
							title: '请输入公司联系人'
						})
						return
					}
					if (!form.phone) {
						uni.showToast({
							icon: 'none',
							title: '请输入联系人电话'
						})
						return
					}
					if (!/^1[3-9]\d{9}$/.test(form.phone)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确联系人电话'
						})
						return
					}
					if (!/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(form.email)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确联系人电子邮箱'
						})
						return
					}
					if (!form.person_name) {
						uni.showToast({
							icon: 'none',
							title: '请输入法人代表'
						})
						return
					}
					if (!/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(form.person_email)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确法人代表电子邮箱'
						})
						return
					}
					if (!form.area_id) {
						uni.showToast({
							icon: 'none',
							title: '请选择服务区域'
						})
						return
					}
					this.request.http('/user/masterWorkerCheckFirm', 'post', {
						businesslicenseimgs: form.businesslicenseimgs,
						name: form.name,
						certificate_type: form.certificate_type,
						cart: form.cart,
						corporation_name: form.corporation_name,
						phone: form.phone,
						email: form.email,
						person_name: form.person_name,
						person_email: form.person_email,
						address: form.address || '',
						area_id: form.area_id,
						remark_message: form.remark_message || '',
					}).then(res => {
						let data = res.data
						if (data.code == 1) {
							this.masterWorkerCheckDetail()
							this.$refs.enterprise.disabled = true
						}
					})
				}
			},
			onJump(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F7F9F9;
	}

	.certification {
		padding: 0 20rpx 34rpx;

		.certification-title {
			padding-left: 26rpx;
			margin-top: 34rpx;
			margin-bottom: 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #474747;
			line-height: 42rpx;
		}

		.time-type {
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.time-item {
				position: relative;
				width: 287rpx;
				height: 133rpx;
				border-radius: 38rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 27rpx;
				color: #FFFFFF;
				line-height: 133rpx;
				text-align: center;

				.type-bg {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					width: 100%;
					height: 100%;
				}

				text {
					position: relative;
					z-index: 10;
				}

				.checked {
					position: absolute;
					right: 22rpx;
					bottom: 18rpx;
					z-index: 11;
					width: 27rpx;
					height: 27rpx;
					border-radius: 8rpx;
					border: 2rpx solid #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 20rpx;
						height: 18rpx;
					}
				}
			}
		}

		.agreement {
			margin-top: 32rpx;
			position: relative;
			width: 430rpx;
			// margin: 35rpx auto 0;

			.agreement-radio {
				display: flex;
				align-items: center;

				image {
					margin-top: 2rpx;
					margin-right: 10rpx;
					width: 25rpx;
					height: 25rpx;
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 21rpx;
					color: #999999;

					text {
						margin: 0 10rpx;
						color: #555555;
					}
				}
			}

			.tips {
				position: absolute;
				width: 242rpx;
				height: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 300;
				font-size: 19rpx;
				color: #9C9C9C;
				line-height: 36rpx;
				text-align: center;

				image {
					position: absolute;
					top: 0;
					left: 0;
					width: 242rpx;
					height: 36rpx;
				}

				text {
					position: relative;
					z-index: 9;
				}
			}
		}

		.submit {
			margin: 140rpx auto 0;
			width: 650rpx;
			height: 104rpx;
			background: #3D3D3D;
			border-radius: 38rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 31rpx;
			color: #B0DD67;
			line-height: 104rpx;
			text-align: center;

			&.edit {
				color: #FFAC98;
			}
		}
	}

	/deep/.u-form-item {
		position: relative;
	}
</style>